<template>
<div class="login-container">
    <h2>登录</h2>
    <div class="input-group">
        <label for="username">用户名</label>
        <img src="../../assets/images/login/user.png" alt="User Icon">
        <input type="text" id="username" v-model="loginForm.userName" placeholder="请输入用户名">
    </div>
    <div class="input-group">
        <label for="password">密码</label>
        <img src="../../assets/images/login/password.png" alt="Password Icon">
        <input type="password" id="password" v-model="loginForm.userPassword" placeholder="请输入密码">
	</div>
  <button class="login-button" v-on:click="login">登录</button>
</div>
</template>
<script>
import api from '../../api/login';


export default {
  data() {
    return {
      loginForm: {
        userName: 'root',
        userPassword:'123456'
      },
    };
  },
  methods: {
    login(){
        api.login(this.loginForm).then((response)=>{
          //console.log(response)
          if (response.code === 200) {
            this.$router.push('/main') // 重定向到注册页面
          }else {
            this.$message(response.message);
          }
        })
    },
  }
}
</script>
<style scoped>
body{

  background-color: #ffffff;
}
body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
  background: url('../../assets/images/login/background.jpg') no-repeat center center fixed;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

    .login-container {
        background-color: #fff;
        padding: 40px;
        width: 350px; /* Adjusted width */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        text-align: center;
        position: absolute;
      top: 300px;
      left: 800px;

    }
    .input-group label {
        display: block;
        text-align: left;
        margin-bottom: 5px;
    }
    .input-group {
        position: relative;
        margin-bottom: 20px;
    }
    .input-group input {
        width: 90%;
        padding: 10px 10px 10px 40px;
        padding-left: 35px; /* Space for icon */
        font-size: 13px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }
    .input-group img {
        position: absolute;
        left: 3%;
        top: 68%;
        transform: translateY(-50%);
        height: 20px;
        width: 20px;
    }
    .login-button {
        background: linear-gradient(to right, #ff758c, #ff7eb3);
        color: #fff;
        border: none;
        border-radius: 20px;
        cursor: pointer;
        padding: 10px;
        width: 100%;
        margin-top: 20px;
        font-size: 15px;
    }
    .login-button:hover {
        opacity: 0.9;
    }
    .register-link {
        color: #708090;
        text-decoration: none;
        display: block;
        margin-top: 20px;
        font-size: 13px;
    }
</style>

